<template>
  <div class="card-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">一体杆名称：</span>

      <el-input
        v-model.trim="searchs.poleName"
        clearable
        placeholder="请输入一体杆名称"
        class="search-main"
      />
      <span class="search-label">一体杆编号：</span>

      <el-input
        v-model.trim="searchs.poleNumber"
        clearable
        placeholder="请输入一体杆编号"
        class="search-main"
      />
      <span class="search-label">运行状态：</span>

      <el-select placeholder="请选择运行状态" v-model="searchs.poleStatus">
        <el-option
          v-for="item in cardStatusList"
          :key="item.id"
          :value="item.id"
          :label="item.name"
        />
      </el-select>

      <el-button type="primary" class="search-btn" @click="doSearch"
        >查询</el-button
      >
    </div>

    <!-- 新增删除操作区域 -->
    <div class="create-container">
      <el-button type="primary" @click="toRot">添加一体杆</el-button>

      <el-button @click="delList">批量删除</el-button>
    </div>

    <!-- 表格区域 -->
    <div class="table">
      <el-table
        style="width: 100%"
        :data="cardList"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序号" >
        <template slot-scope="scope">
        {{ params.pageSize*(params.page-1)+scope.$index + 1 }}
      </template>
      </el-table-column>
        <el-table-column prop="poleName" label="一体杆名称" />
        <el-table-column prop="poleNumber" label="一体杆编号" />
        <el-table-column prop="poleIp" label="一体杆IP" />
        <el-table-column prop="areaName" label="安装区域" />
        <el-table-column label="一体杆类型">
          <template #default="scope">
            {{ scope.row.poleType === "entrance" ? "入口" : "出口" }}</template
          >
        </el-table-column>
        <el-table-column label="运行状态">
          <template #default="scope">
            {{ scope.row.poleStatus === 1 ? "正常" : "异常" }}</template
          >
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="mini" type="text" @click="handle(scope.row)"
              >编辑</el-button
            >

            <el-button size="mini" type="text" @click="delRender(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="pageChange"
        :current-page="params.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="params.pageSize"
        layout="total,  prev, pager, next, sizes, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- chuangkou -->
      <el-dialog
      class="card-dialog"
        title="添加一体杆"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item
            label="一体杆名称"
            :label-width="formLabelWidth"
            prop="poleName"
          >
            <el-input
              v-model="form.poleName"
              autocomplete="off"
              placeholder="请输入一体杆名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="一体杆编号"
            :label-width="formLabelWidth"
            prop="poleNumber"
          >
            <el-input
              v-model="form.poleNumber"
              autocomplete="off"
              placeholder="请输入一体杆编号"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="一体杆IP"
            :label-width="formLabelWidth"
            prop="poleIp"
          >
            <el-input
              v-model="form.poleIp"
              autocomplete="off"
              placeholder="请输入一体杆IP"
            ></el-input>
          </el-form-item>
          <el-form-item
            class="one"
            label="关联区域"
            :label-width="formLabelWidth"
            prop="areaId"
          >
            <el-select placeholder="请选择关联区域" v-model="form.areaId">
              <el-option
                v-for="item in nameList"
                :key="item.areaId"
                :value="item.areaId"
                :label="item.areaName"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            class="one"
            label="一体杆类型"
            :label-width="formLabelWidth"
            prop="poleType"
          >
            <el-select placeholder="请选择一体杆类型" v-model="form.poleType">
              <el-option
                v-for="item in poleType"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  getPoleListAPI,
  getCarAreaList,
  addPoleInfoAPI,
  delPoleInfoAPI,
  updatePoleInfoAPI
} from "@/api/pole";
import { Message } from "element-ui";
export default {
  data() {
    return {
      poleType: [
        { id: "entrance", name: "入口" },
        { id: "export", name: "出口" },
      ],
      nameList: [],
      dialogVisible: false,
      form: {
        poleName: "",
        poleNumber: "",
        poleIp: "",
        areaId: "",
        poleType: "",
      },
      rules: {
        poleName: [
          { required: true, message: "请输入一体杆名称", trigger: "blur" },
        ],
        poleNumber: [
          { required: true, message: "请输入一体杆编号", trigger: "blur" },
        ],
        poleIp: [
          { required: true, message: "请输入一体杆IP", trigger: "blur" },
        ],
        areaId: [
          { required: true, message: "请选择关联区域", trigger: "blur" },
        ],
        poleType: [
          { required: true, message: "请选择一体杆类型", trigger: "blur" },
        ],
      },
      idList: [],
      cardList: [],
      areaId: '',
      total: 0,
      params: {
        page: "1",
        pageSize: "10",
        poleName: "",
        poleNumber: "",
        poleStatus: "",
      },
      searchs: {
        poleName: null,
        poleNumber: null,
        poleStatus: null,
      },
      cardStatusList: [
        {
          id: "",
          name: "全部",
        },
        {
          id: 0,
          name: "正常",
        },
        {
          id: 1,
          name: "异常",
        },
      ],
    };
  },
  async created() {
    this.render();
    let { data } = await getCarAreaList();
    this.nameList = data;
  },
  methods: {
    confirmSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return;
        if (!this.areaId) {
          try {
            await addPoleInfoAPI(this.form);
            this.dialogVisible = false;
            this.render();
            Message.success("添加成功！");
          } catch (err) {
            Message.error(err);
          }
        }else{
          try {
            await updatePoleInfoAPI({
              ...this.form,
              id: this.areaId
            });
            this.dialogVisible = false;
            this.render();
            Message.success("修改成功！");
          } catch (err) {
            Message.error(err);
          }
        }
      });
    },
    handleSelectionChange(res) {
      this.idList = res.map((item) => item.id);
    },
    async delList() {
      try {
        if (this.idList.length === 0) {
          Message.error("请选择一体杆");
          return;
        } else {
          await this.$confirm("确定删除所有选中的一体杆吗?");
          delPoleInfoAPI(this.idList);
          // await Promise.all(this.idList.map(item=>delCardAPI(item)))
          Message.success("全部删除成功");
          this.render();
        }
      } catch (err) {
        Message.error("删除失败，请重试");
      }
    },
    async toRot() {
      this.areaId = '';
      this.form = {
        poleName: "",
        poleNumber: "",
        poleIp: "",
        areaId: "",
        poleType: "",
      };
      this.dialogVisible = true;
    },
    doSearch() {
      this.params.poleName = this.searchs.poleName;
      this.params.poleNumber = this.searchs.poleNumber;
      this.params.poleStatus = this.searchs.poleStatus;
      this.render();
    },
    async render() {
      const res = await getPoleListAPI(this.params);
      this.cardList = res.data.rows;
      this.total = res.data.total;
    },
    pageChange(page) {
      this.params.page = page;
      this.render();
    },
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.render();
    },
    async delRender(id) {
      try {
        await this.$confirm("确定删除吗?");
        await delPoleInfoAPI(id.id);
        Message.success("删除成功");
        this.render();
      } catch (err) {
        console.log(err);
      }
    },
    handle(row) {
      this.areaId = row.id;
      let { poleName, poleNumber, poleIp, areaId, poleType } = row;
      this.form = {
        poleName,
        poleNumber,
        poleIp,
        areaId,
        poleType,
      };
      this.dialogVisible = true;
    },
  },
};
</script>


<style lang="scss" scoped>
::v-deep .card-dialog .el-select{
  width: 100%;
}
::v-deep .el-dialog__header {
  text-align: start;
}
.card-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, 0.9);
  padding-bottom: 20px;
  .search-main {
    width: 220px;
    margin-right: 10px;
  }
  .search-btn {
    margin-left: 20px;
  }
}
.create-container {
  margin: 20px 0px;
}
.page-container {
  padding: 4px 0px;
  text-align: right;
}
.form-container {
  padding: 0px 80px;
}
::v-deep .el-table__header-wrapper th {
  background-color: #f4f6f8;
}
::v-deep .el-pagination {
  margin-top: 30px;
  text-align: right;
}
</style>
